import React, { Component } from 'react';

// 导入封装的方法(商品收藏，详情)
import { getGood_fav, getGood_info,getcar_add } from '../api/index'

import MySlideshow from '../components/Home/MySlideshow'

import '../styles/product.css'

import { NavBar,Skeleton } from 'antd-mobile';

class ProductJsx extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodinfo: {}
        }
    }
    componentDidMount() {
        getGood_info({ goodid: this.props.location.state.id }).then(res => {
            // 处理服务端返回的图片列表，将数组+字符串转换为 数组+对象
            res.data.goodinfo.pics = res.data.goodinfo.pics &&
                res.data.goodinfo.pics.map((item, index) => {
                    return { pic: item }
                })
                console.log(res);
            // 保存商品详情
            this.setState({
                goodinfo: res.data.goodinfo
            })
        })
    }
    // 点击返回
    back() {
        this.props.history.go(-1)
    }
    // 点击收藏
    Collect() {
        const myid = localStorage.getItem("userId")
        const shopid = this.state.goodinfo.id
        // console.log(shopid);
        getGood_fav({userid:myid,goodid:shopid}).then(res=>{
            console.log(res);
        })
    }
    // 点击购物车
    goShopcar() {
        this.props.history.push('/index/shopcar')
    }
    // 点击加入购物车
    gocar() {
        const myid = localStorage.getItem("userId")
        const shopid = this.state.goodinfo.id
        getcar_add({userid:myid,goodid:shopid}).then(res=>{
            console.log(res);
            alert("加入成功！")
        })
    }
    render() {
        // console.log(this.state.pics);
        return (
            <div className='product'>
                <NavBar onBack={() => { this.back() }}>搜索</NavBar>
                {/* 如果拿到详情数据，就渲染商品详情，否则渲染骨架屏 */}
                {
                    this.state.goodinfo.pics &&
                        this.state.goodinfo.pics.length ?
                        <>
                            {/* 轮播图 */}
                            <MySlideshow piglist={this.state.goodinfo.pics} />
                            {/* 商品名称 */}
                            <div className="name">
                                {this.state.goodinfo.brandEN} &nbsp;
                                {this.state.goodinfo.brand} &nbsp;
                                {this.state.goodinfo.name}
                            </div>
                            {/* 商品价格 */}
                            <div className="price">
                                ￥{
                                    this.state.goodinfo.salesPrice ?
                                        this.state.goodinfo.salesPrice.value : 0
                                }
                            </div>
                        </>
                        :
                        <>
                            {/* 骨架屏 */}
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={5} animated />
                        </>
                }
                <div className='foot'>
                    <div className='obtn' onClick={()=>{this.Collect()}}>收藏</div>
                    <div className='obtn'>分享</div>
                    <div className='obtn' onClick={()=>{this.goShopcar()}}>购物车</div>
                    <div className='btn' onClick={()=>{this.gocar()}}>加入购物车</div>
                    <div className='btn'>立即购买</div>
                </div>
            </div>
        );
    }
}

export default ProductJsx;